Shadows and Effects in Figma are visual properties used to improve depth, hierarchy, focus, realism, and visual appearance in UI and graphic design. They can make cards appear elevated, buttons look interactive, backgrounds feel softer, and interfaces appear more polished and modern.
To learn professional Figma design skills, explore JustAcademy Figma Training and practice through guided learning. You can also Register for Figma Course Demo.
A shadow is a visual effect that creates the appearance of depth by placing a darker or softer visual area around or inside an object. Shadows help users understand the relationship between elements and the surface behind them.
For example, a card with a subtle drop shadow can appear slightly raised above the background, while an inner shadow can make a button or input field appear pressed or recessed.
Object
↓
Shadow
↓
Background
Effects are visual treatments applied to layers, objects, frames, components, text, and other design elements. They can modify how an object interacts visually with its surroundings or how the object itself appears.
Common effects include drop shadow, inner shadow, layer blur, background blur, noise, texture, glass, and other visual treatments available in current Figma workflows.
Select Object
↓
Effects Section
↓
Click +
↓
Choose Effect
↓
Adjust Properties
↓
Preview Result
Drop Shadow creates a shadow outside an object. It gives the impression that the object is positioned above the surface behind it.
Drop shadows are commonly used for cards, buttons, menus, popups, modals, floating controls, and other elevated components.
OBJECT
┌───────────┐
│ │
│ CARD │
│ │
└───────────┘
░░░
░░░░░░░
░░░░░░░░░░
SHADOW
A drop shadow can be controlled through several properties. The exact controls available can depend on the selected object and current Figma features.
| Property | Purpose |
|---|---|
| X | Controls horizontal shadow offset. |
| Y | Controls vertical shadow offset. |
| Blur | Controls how soft or sharp the shadow appears. |
| Spread | Controls how much the shadow expands or contracts. |
| Color | Controls the shadow color. |
| Opacity | Controls shadow visibility and strength. |
| Blend Mode | Controls how the shadow interacts visually with content underneath. |
X and Y determine the position of a shadow relative to its object.
-Y
↑
|
-X ← OBJECT → +X
|
↓
+Y
Blur controls the softness of a shadow. A low blur value produces a sharper shadow, while a higher blur value creates a softer and more diffused shadow.
| Blur Level | Visual Character | Typical Use |
|---|---|---|
| Low | Sharp | Small controls and compact UI |
| Medium | Soft | Cards and buttons |
| High | Very soft | Modals and atmospheric designs |
Spread controls the size of the shadow around the object. Increasing spread can make a shadow extend farther from the object's shape, while reducing spread can keep it closer to the object.
Small Spread
┌──────────┐
│ Object │
└──────────┘
░░░░░░░░
Large Spread
░░░░░░░░░░░░
░ ┌────────┐ ░
░ │ Object │ ░
░ └────────┘ ░
░░░░░░░░░░░░
Shadows do not always need to be pure black. Depending on the design, designers can use dark neutral colors, tinted colors, or colors related to the surrounding environment.
For modern interfaces, a slightly transparent dark shadow is often more natural than a completely opaque black shadow.
Opacity determines how visible the shadow is. Lower opacity creates a subtle shadow, while higher opacity creates a stronger visual effect.
Inner Shadow places the shadow inside the boundaries of an object instead of outside it. It is useful for creating recessed, pressed, inset, or dimensional visual effects.
┌─────────────────┐
│ ░░░░░░░░░░░░░░░ │
│ ░ OBJECT ░ │
│ ░ ░ │
│ ░░░░░░░░░░░░░░░ │
└─────────────────┘
INNER
SHADOW
| Feature | Drop Shadow | Inner Shadow |
|---|---|---|
| Location | Outside object | Inside object |
| Main Purpose | Elevation | Inset or recessed appearance |
| Common Use | Cards, modals, buttons | Pressed controls, inputs, illustrations |
| Depth Direction | Object appears raised | Object appears pushed inward |
Layer Blur blurs the selected layer itself. Instead of blurring the content behind the object, it makes the selected object appear blurred.
Layer blur can be used for decorative backgrounds, atmospheric images, motion effects, anonymization, soft shapes, and photographic effects.
Original Layer
████████████████
↓
Layer Blur
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
Background Blur blurs content located behind the selected layer. It is commonly used for translucent navigation bars, overlays, menus, panels, and glass-style interfaces.
For background blur to be visible, the foreground layer generally needs some transparency so that the blurred content behind it can be seen.
Background Image
████████████████████
████████████████████
↓
┌──────────────────┐
│ Transparent UI │
│ Background │
└──────────────────┘
↓
Blurred Background
| Feature | Layer Blur | Background Blur |
|---|---|---|
| Blurs | Selected layer | Content behind selected layer |
| Typical Use | Images and decorative shapes | Glass-style UI and overlays |
| Transparency Required | Not necessarily | Generally required to visually see the background blur |
| Visual Result | Object becomes soft | Background becomes soft through the object |
Glass-style effects combine transparency, background blur, highlights, borders, and lighting to create an appearance similar to translucent glass.
They are useful for modern navigation bars, floating panels, dashboards, media controls, and futuristic interface designs.
Background
████████████████████
████████████████████
↓
┌────────────────────┐
│ Translucent Panel │
│ Blur + Highlight │
└────────────────────┘
↓
Glass Effect
Noise can add visual grain or subtle randomness to a design. It can be used to make flat surfaces feel more textured and can support visual styles such as film grain, paper texture, or atmospheric backgrounds.
Noise should generally be used carefully because excessive grain can reduce readability and make an interface look visually busy.
Texture effects can create rough, distressed, or tactile visual appearances. They are useful for illustrations, posters, creative landing pages, branding concepts, and experimental interfaces.
Figma allows designers to combine effects to create more complex visual treatments. For example, a card can use multiple shadows to create both a near contact shadow and a softer ambient shadow.
Card
↓
Inner Shadow
↓
Primary Shadow
↓
Soft Ambient Shadow
↓
Background
Multiple shadows can create more realistic depth than a single strong shadow. A common approach is to combine a small, sharper shadow with a larger, softer shadow.
| Shadow | Purpose |
|---|---|
| Small Shadow | Creates contact with the surface. |
| Large Soft Shadow | Creates ambient elevation. |
| Inner Shadow | Adds internal depth. |
Elevation represents how far an element appears to be above a surface. Shadows are one of the most common ways to communicate elevation.
Level 0 → Flat Background
Level 1 → Card
Level 2 → Raised Button
Level 3 → Dropdown
Level 4 → Modal
Level 5 → Floating Element
A design system can define reusable shadow levels instead of allowing every designer to create random shadow values.
| Level | Example | Visual Strength |
|---|---|---|
| Elevation 0 | Page background | None |
| Elevation 1 | Card | Subtle |
| Elevation 2 | Button or dropdown | Medium |
| Elevation 3 | Popover | Strong |
| Elevation 4 | Modal | Very strong |
Cards frequently use shadows to separate themselves from the page background. A subtle shadow can provide enough separation without making the card appear excessively elevated.
┌────────────────────────┐
│ CARD │
│ │
│ Title │
│ Description │
│ │
└────────────────────────┘
░░░░░░░░░
░░░░░░░░░░░░░
Button shadows can make a button appear raised and interactive. Shadows can also change between default, hover, pressed, and disabled states.
| State | Possible Shadow Treatment |
|---|---|
| Default | Subtle elevation |
| Hover | Slightly stronger elevation |
| Pressed | Reduced or inner shadow |
| Disabled | Minimal or no shadow |
Modal dialogs usually need stronger separation from the background because they sit above the primary page content. A larger, softer shadow can help establish this hierarchy.
Dropdown menus can use a shadow to visually separate the menu from the content behind it. This is especially useful when the dropdown overlaps other interface elements.
Tooltips can use subtle shadows to communicate that they are floating above the interface. The shadow should remain secondary to the tooltip's text and background.
Input fields may use inner shadows to create a recessed appearance or subtle outer shadows to establish separation from the page.
Focus states should normally prioritize a clear focus indicator rather than relying only on a shadow.
Image cards, profile pictures, product images, and thumbnails can use shadows to separate the image from the background.
┌──────────────────┐
│ │
│ IMAGE │
│ │
└──────────────────┘
░░░░░░░
░░░░░░░░░░░
Text can also receive visual effects such as shadows or blur. Text shadows can help improve separation from certain backgrounds, while blur can be used for decorative or experimental effects.
Text effects should be used carefully because excessive effects can reduce readability.
A text shadow creates a shadow behind text and can be useful for decorative headings, image overlays, posters, banners, and special visual effects.
TEXT
TEXT░
TEXT░░
TEXT░░░
Icons can use subtle shadows to create depth, especially when placed inside floating buttons, cards, or colored containers.
However, icon shadows should not overpower the icon itself.
Illustrations can combine shadows, blur, gradients, noise, and texture to create depth and visual storytelling.
Shadows and gradients can work together to create richer visual designs. A gradient can establish color and lighting while a shadow provides spatial separation.
Gradient Fill
+
Drop Shadow
↓
Depth + Color + Lighting
Strokes can be combined with shadows to create outlined components with depth. This is useful for cards, buttons, inputs, badges, and illustrations.
Stroke
+
Shadow
+
Fill
↓
Layered UI Component
Transparency is important when creating glass-like interfaces and background blur effects. A semi-transparent layer allows visual information behind it to contribute to the final appearance.
Blend modes determine how certain visual properties interact with layers beneath them. Combining blend modes with shadows, noise, fills, and other effects can create advanced visual compositions.
Blend modes should be tested against the actual background because the final appearance depends on the colors and layers underneath.
When multiple effects are applied, their order can influence how the final result is rendered. Designers should therefore check the visual result after reordering effects.
Effect A
↓
Effect B
↓
Effect C
↓
Final Render
Effect styles allow designers to save reusable effect configurations. This is especially useful in design systems where the same shadow or blur treatment needs to be used across many components.
For example, a design system can create styles such as Shadow/Small, Shadow/Medium, Shadow/Large, or Blur/Background.
| Style | Purpose |
|---|---|
| Shadow/XS | Very subtle separation |
| Shadow/SM | Small cards and controls |
| Shadow/MD | Raised cards and dropdowns |
| Shadow/LG | Modals and floating panels |
| Shadow/XL | Dramatic elevated elements |
Effects can be included in components so that repeated instances share a consistent visual treatment.
For example, a reusable card component can contain a predefined shadow style. Updating the component or style can help maintain consistency throughout the interface.
Component variants can represent different visual states such as default, hover, pressed, focused, selected, and disabled.
Button Component
├── Default
├── Hover
├── Pressed
├── Focused
├── Selected
└── Disabled
A hover interaction can increase or modify the shadow to indicate that an element has become interactive or elevated.
The change should remain subtle enough that the interface does not feel unstable or overly animated.
Pressed states can reduce an outer shadow or use an inner shadow to create the impression that the element has moved inward.
Default
┌────────────┐
│ BUTTON │
└────────────┘
Shadow ↓
Pressed
┌────────────┐
│ BUTTON │
└────────────┘
Inner Shadow
Focus states need a clear visual indicator so keyboard and assistive technology users can identify the currently focused control. A shadow or glow may be part of the design, but it should not be the only indicator when a stronger focus treatment is needed.
Disabled elements generally use reduced visual emphasis. Removing or reducing shadows can help communicate that the component is not currently interactive.
Shadows behave differently on dark backgrounds because dark shadows can become difficult to perceive. In dark interfaces, designers may rely on lighter borders, subtle tonal differences, controlled elevation, or carefully adjusted shadow treatments.
| Light Mode | Dark Mode |
|---|---|
| Dark shadow is usually easy to see. | Dark shadow may have low visibility. |
| Elevation often uses shadow. | Elevation may combine shadow and surface contrast. |
| Background is generally light. | Background and surfaces are darker. |
Shadows should support hierarchy rather than replace important visual communication. Important states such as focus, selection, error, and success should not depend only on subtle shadows.
Effects can guide the user's attention. Strong effects can make an element appear more important, while subtle effects can create background separation without attracting too much attention.
Primary Action
↓
Strongest Visual Emphasis
Secondary Content
↓
Medium Emphasis
Background
↓
Lowest Emphasis
Minimal interfaces generally benefit from restrained effects. A few carefully selected shadows can create hierarchy without making the interface visually heavy.
Using effects consistently is more important than adding effects everywhere.
Neumorphism uses combinations of light and dark shadows to create an embossed or extruded appearance. The object and background often share similar colors, while shadows create the perceived depth.
Light Shadow ↖
┌──────────┐
│ BUTTON │
└──────────┘
↘ Dark Shadow
Neumorphic designs should be tested carefully for readability, usability, and sufficient visual distinction.
Glassmorphism typically combines transparency, background blur, borders, gradients, and highlights. The background remains visible through the translucent surface while the blur creates a frosted-glass appearance.
Background Image
████████████████████
████████████████████
↓
Transparency
↓
Background Blur
↓
Border + Highlight
↓
Glass Panel
Layer blur can be used to create soft background shapes. Designers can place blurred circles, gradients, or images behind interface content to create an atmospheric visual style.
Background blur is useful for navigation bars placed over images, videos, or colorful backgrounds. A translucent navigation container can preserve context while improving readability.
Effects can be applied to elements inside Auto Layout frames. The visual effect does not replace layout properties; Auto Layout should still be configured according to the actual spacing and sizing requirements of the component.
Effects should remain visually appropriate when a component changes size. A shadow that looks balanced on a desktop card may appear too strong on a smaller mobile card.
During developer handoff, designers should clearly communicate important effect properties such as shadow color, opacity, X, Y, blur, spread, and intended usage.
Simple shadow effects can often be represented in CSS using box-shadow, while text shadows can be represented using text-shadow. More complex effects may require additional implementation techniques.
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
| Figma | CSS |
|---|---|
| X | Horizontal offset |
| Y | Vertical offset |
| Blur | Blur radius |
| Spread | Spread radius |
| Color | Shadow color |
| Opacity | Usually represented through color alpha |
.card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
The CSS values should be treated as implementation examples rather than a direct requirement for every Figma component.
Design in Figma
↓
Add Shadow
↓
Set X / Y
↓
Set Blur
↓
Set Spread
↓
Set Color + Opacity
↓
Inspect in Dev Mode
↓
Implement in CSS
Create a card with a white or light surface and a subtle shadow.
A floating action button can use a stronger shadow because it visually sits above the main interface.
+-----------+
| + |
| |
+-----------+
░░░░░░░
░░░░░░░░░░
░░░░░░░░░░░░░
Create decorative circles behind a hero section and apply layer blur to them. Keep the main content sharp and place the blurred shapes behind it.
Blurred Shape Blurred Shape
○ ○
Main Content
┌──────────────┐
│ Heading │
│ Description │
│ Button │
└──────────────┘
Create an input field with a subtle border and optional inner shadow. For the focused state, add a clear focus treatment that is visually distinct from the default state.
| State | Suggested Treatment |
|---|---|
| Default | Border with minimal shadow |
| Hover | Slight visual emphasis |
| Focus | Clear focus indicator |
| Error | Clear error styling |
| Disabled | Reduced visual emphasis |
Create a dashboard containing multiple cards and apply a consistent effect style to each card.
Dashboard
├── Revenue Card
├── Users Card
├── Orders Card
├── Conversion Card
└── Activity Card
All cards
↓
Same Elevation System
↓
Consistent Visual Hierarchy
Build a modern card containing an image, title, description, action button, border, rounded corners, and shadow.
Create a dashboard with a colorful background and translucent cards.
Create a small design system containing reusable elevation levels.
| Token | Usage |
|---|---|
| Elevation/0 | Flat content |
| Elevation/1 | Cards |
| Elevation/2 | Buttons and dropdowns |
| Elevation/3 | Popovers |
| Elevation/4 | Dialogs and modals |
Consistent lighting makes an interface feel coherent. If one component has a shadow falling down-right while another has a shadow falling up-left without a deliberate reason, the interface may feel visually inconsistent.
Light Source
↘
OBJECT
↘
SHADOW
Large numbers of complex blur and visual effects can increase rendering work, particularly in large or highly detailed files. Use effects intentionally and temporarily disable unnecessary effects when working on complex designs if performance becomes an issue.
1. Design Basic Layout
↓
2. Establish Surface Colors
↓
3. Define Elevation Levels
↓
4. Add Basic Shadows
↓
5. Add Inner Shadows if Required
↓
6. Add Blur or Glass Effects
↓
7. Create Effect Styles
↓
8. Apply to Components
↓
9. Create Interaction States
↓
10. Test Accessibility
↓
11. Test Responsive Layouts
↓
12. Prepare Developer Handoff
A professional design system should avoid creating random shadow values throughout the interface. Instead, designers can define semantic elevation tokens and reusable effect styles.
Design System
│
├── Elevation 0
├── Elevation 1
├── Elevation 2
├── Elevation 3
├── Elevation 4
│
├── Blur / Background
├── Blur / Layer
│
└── Glass / Surface
| Topic | Key Point |
|---|---|
| Drop Shadow | Creates external elevation. |
| Inner Shadow | Creates internal or recessed depth. |
| Layer Blur | Blurs the selected layer. |
| Background Blur | Blurs content behind the selected layer. |
| Noise | Adds grain-like visual variation. |
| Texture | Creates tactile or distressed appearance. |
| Glass | Creates translucent glass-style visuals. |
| Blur | Controls softness and diffusion. |
| Spread | Controls shadow expansion or contraction. |
| Opacity | Controls effect visibility. |
| Effect Style | Stores reusable effect properties. |
| Elevation | Communicates depth and hierarchy. |
A Drop Shadow is an effect that creates a shadow outside an object. It is primarily used to communicate elevation, depth, separation, and hierarchy between an element and its background.
An Inner Shadow is a shadow rendered inside the boundaries of an object. It is commonly used to create recessed, pressed, inset, or dimensional effects.
Layer Blur affects the selected layer itself, while Background Blur affects the content positioned behind the selected layer. Layer Blur is commonly used for softening an object, while Background Blur is commonly used for translucent or glass-style interfaces.
Effect styles provide reusable visual properties. They improve consistency across components, reduce repetitive work, simplify design-system management, and make it easier to update an effect across multiple designs.
Consistent shadows create a coherent lighting and elevation system. When similar components use similar shadow rules, users can understand the visual hierarchy more easily and the interface appears more professional.
Common Figma drop-shadow effects can be represented in CSS using the box-shadow property. Text shadows can be represented using text-shadow. Exact visual results may require adjustment because design tools and browsers can render complex effects differently.
Create a complete UI kit containing buttons, cards, input fields, dropdowns, tooltips, modals, navigation bars, and floating action buttons. Define a consistent elevation system and reusable effect styles.
Modern UI Kit
│
├── Buttons
│ ├── Default
│ ├── Hover
│ ├── Pressed
│ └── Disabled
│
├── Cards
│ ├── Flat
│ ├── Raised
│ └── Interactive
│
├── Inputs
│ ├── Default
│ ├── Focus
│ ├── Error
│ └── Disabled
│
├── Dropdown
├── Tooltip
├── Modal
├── Navigation
└── Floating Action Button
↓
Reusable Effect System
↓
Consistent UI
Shadows and Effects in Figma are powerful tools for creating depth, hierarchy, focus, atmosphere, and polished visual interfaces. Drop shadows can make components appear elevated, inner shadows can create recessed surfaces, layer blur can soften selected content, and background blur can create modern translucent interfaces.
The most effective approach is not to add effects everywhere, but to use them intentionally as part of a consistent design system. By combining appropriate shadows, blur, transparency, texture, components, variants, and reusable effect styles, designers can create modern interfaces that are visually clear, consistent, and easier to hand off to developers.
For structured learning and practical Figma training, visit JustAcademy Figma Training and Register for Figma Course Demo.
